<!--

* description: 权益查询

* author:ss

* createdDate:2020-1-25

-->

<template>

  <section class="editAreaAudit">

    <el-dialog

      v-dialogDrag

      :visible="popupsVisible"

      width="75%"

      :append-to-body="true"

      :close-on-click-modal="false"

      @close="closeEdit"

    >

      <dialogHeader

        slot="title"

        :title="titleName"

        :style-type="$store.state.app.dialogType"

      />



      <div class="fixHeight">

        <div class="filter-container filter-params">

          <el-row :gutter="26">

            <component

              :is="comp.component"

              v-for="comp in tableComponents1.filter(o => o.isMust === true)"

              :ref="

                comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey

              "

              :key="comp.compKey"

              :validrule="comp.validrule"

              :code-field="comp.codeField"

              :text-field="comp.textField"

              :popups-key="comp.compKey"

              :parent-fileds="comp.parentFileds"

              :code="formField[comp.codeField]"

              :disabled="comp.disabled"

              :is-require="comp.isRequire"

              :is-mul="comp.isMul"

              :span="comp.span || 8"

              :label-name="comp.labelName"

              :o-fields="comp.oFields"

              :options="comp.options"

              :custom-obj="comp.customObj"

              :lookuptype="comp.lookuptype"

              :data-to-object="comp.dataToObject"

              :date-options-type="comp.dateOptionsType"

              @changeCode="getComponentCode"

              @focusCode="getFocusCode"

            />

          </el-row>

        </div>

      </div> 
 <div class="fixHeight">

        <div class="filter-container filter-params">
  <h3 :style="styleObj"  class="filter-container filter-title">

            可用套餐/精品
            <el-button

             

              type="primary"

              class="iconfont icon-newlyAdded"

              :disabled="disableAdd"

              @click="rowAdd"

              >选择</el-button

            >
         </h3>
  
          <one-table-template
            ref="multipleTable"
            :dynamic-table-cols="tableCols"
            :dynamic-api-config="apiConfig"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="false"
            :dynamic-is-show-more-btn="true"
            :dynamic-table-defult-height="300"
            :isShowPagination="false"
            
          />
        </div>
 </div>
      <div class="fixHeight">

        <div class="filter-container filter-params">

          <h3 :style="styleObj"  class="filter-container filter-title">

            可用卡券
          </h3>
        <one-table-template
            ref="multipleTable"
            :dynamic-table-cols="tableCols2"
            :dynamic-api-config="apiConfig"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="false"
            :dynamic-is-show-more-btn="true"
            :dynamic-table-defult-height="300"
            :isShowPagination="false"
            
          />
        </div>
      </div>

      <div class="fixHeight">

        <div class="filter-container filter-params">

          <h3 :style="styleObj"  class="filter-container filter-title">

            已用/无效套餐/精品

          </h3>

           <one-table-template
            ref="multipleTable"
            :dynamic-table-cols="tableCols3"
            :dynamic-api-config="apiConfig"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="false"
            :dynamic-is-show-more-btn="true"
            :dynamic-table-defult-height="300"
            :isShowPagination="false"
            
          />
        </div>
      </div>



      <div class="fixHeight">

        <div class="filter-container filter-params">

         <h3 :style="styleObj"  class="filter-container filter-title">

            已用/无效卡券
         </h3>
             <one-table-template
            ref="multipleTable"
            :dynamic-table-cols="tableCols4"
            :dynamic-api-config="apiConfig"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="false"
            :dynamic-is-show-more-btn="true"
            :dynamic-table-defult-height="300"
            :isShowPagination="false"
            
          />

        </div>

      </div>

    </el-dialog>

  </section>

</template>



<script>

import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";

import { formMixins } from "@/components/mixins/formMixins";

import OneTableTemplate from "@/components/templates/oneTable";

import api from "@/api/subsidyManage";



export default {

  components: {

    OneTableTemplate,



    // inEdit,

    dialogHeader: () => import("@/components/dialogHeader")

  },



  // 组件混入对象

  mixins: [oneTableWithViewTemplateMixins, formMixins],

  props: {

    dataForForm: {

      type: Object,

      default: () => {}

    },

    isDialogVisible: {

      type: Boolean,

      default: false

    }

  },



  data() {

    const viewPageCode = "areaAudit-edit";



    return {

      editRowData: {},

      editPopupsState: "",

      editPopupsVisible: false,

      dynamicTags: [],

      inputValue: "",

      inputVisible: false,

      titleName: "权益查询",

      inEditPopupsState: "",

      inEditRowData: {},

      inEditPopupsVisible: false,

      apiConfig: api.queryLog,

      // 动态组件-按钮
    


      // 动态组件-查询条件

      tableComponents1:

        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&

        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]

          .tableComponents &&

        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]

          .tableComponents.length > 0

          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]

              .tableComponents

          : [

              {

                compKey: "compKey1",

                labelName: "车牌号：",

                codeField: "qualifiedCertNo",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",

                isMust: true

              },

              {

                compKey: "compKey2",

                labelName: "VIN码：",

                codeField: "produceDate",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",

                isMust: true

              },

              {

                compKey: "compKey3",

                labelName: "车主姓名：",

                codeField: "carConfigCn",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",

                isMust: true

              },

              {

                compKey: "compKey3",

                labelName: "可用积分：",

                codeField: "carConfigCn",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",

                isMust: true

              }

            ],
      tableCols: [
                          {
              prop: 'controlBtn1',
              label: '操作',
              minWidth: 180,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey1',
                  labelName: '详情',
                  component: () => import('@/components/org/linkButton'),
                  clickEvent: (index) => this.edit(index)
                }
              ]
            },
        
        {
          prop: "carSeriesCn",
          label: "订单号",
          align: "center",
        },
        {
          prop: "carConfigCn",
          label: "类别",
          align: "center",
        },
        {
          prop: "optionalPagName",
          label: "保养套餐/精品编码",
          align: "center",
        },
        {
          prop: "carColorName",
          label: "保养套餐/精品名称",
          align: "center",
        },
         {
          prop: "carColorName",
          label: "使用次数/数量",
          align: "center",
        },
         {
          prop: "carColorName",
          label: "剩余次数/数量",
          align: "center",
        },
       
           {
          prop: "carColorName",
          label: "有效期",
          align: "center",
        },
             {
          prop: "carColorName",
          label: "购买日期",
          align: "center",
        },
      ],
      tableCols2: [
                   
        
        {
          prop: "carSeriesCn",
          label: "订单号",
          align: "center",
        },
        {
          prop: "carConfigCn",
          label: "卡券编号",
          align: "center",
        },
        {
          prop: "optionalPagName",
          label: "类别",
          align: "center",
        },
        {
          prop: "carColorName",
          label: "卡券名称",
          align: "center",
        },
         {
          prop: "carColorName",
          label: "使用说明",
          align: "center",
        },
         {
          prop: "carColorName",
          label: "有效期",
          align: "center",
        },
       
           {
          prop: "carColorName",
          label: "购买日期",
          align: "center",
        },
          
      ],
         tableCols3: [
                          {
              prop: 'controlBtn1',
              label: '操作',
              minWidth: 180,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey1',
                  labelName: '详情',
                  component: () => import('@/components/org/linkButton'),
                  clickEvent: (index) => this.edit(index)
                }
              ]
            },
        
        {
          prop: "carSeriesCn",
          label: "订单号",
          align: "center",
        },
        {
          prop: "carConfigCn",
          label: "类别",
          align: "center",
        },
        {
          prop: "optionalPagName",
          label: "保养套餐/精品编码",
          align: "center",
        },
        {
          prop: "carColorName",
          label: "保养套餐/精品名称",
          align: "center",
        },
         {
          prop: "carColorName",
          label: "使用次数/数量",
          align: "center",
        },
         {
          prop: "carColorName",
          label: "剩余次数/数量",
          align: "center",
        },
       
           {
          prop: "carColorName",
          label: "有效期",
          align: "center",
        },
             {
          prop: "carColorName",
          label: "购买日期",
          align: "center",
        },
              {
          prop: "carColorName",
          label: "状态",
          align: "center",
        },
      ],
       tableCols4: [
                   
        
        {
          prop: "carSeriesCn",
          label: "工单号",
          align: "center",
        },
        {
          prop: "carConfigCn",
          label: "订单号",
          align: "center",
        },
        {
          prop: "optionalPagName",
          label: "卡券编号",
          align: "center",
        },
        {
          prop: "carColorName",
          label: "类别",
          align: "center",
        },
         {
          prop: "carColorName",
          label: "卡券名称",
          align: "center",
        },
         {
          prop: "carColorName",
          label: "使用说明",
          align: "center",
        },
          {
          prop: "carColorName",
          label: "有效期",
          align: "center",
        },
       
           {
          prop: "carColorName",
          label: "购买日期",
          align: "center",
        },
           {
          prop: "carColorName",
          label: "状态",
          align: "center",
        },
          
      ],


      // 标题

      textMap: {

        edit: "区域审核"

      },



      // 表单数据（无需赋值，由混入对象赋值）

      formField: this.$utils.getFormField(

        this,

        {},

        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]

      )

    };

  },

  created() {

    this.formField = this.dataForForm;

  },

  methods: {

    // 关闭弹窗

    closeEdit() {

      this.$emit("close");

    },



    // 审核通过

    inEdit() {

      this.queryTable(1);

      this.inEditPopupsState = "审核通过";

      this.inEditPopupsVisible = true;

    },



    // 审核驳回

    reject() {

      this.queryTable(1);

      this.inEditPopupsState = "审核驳回";

      this.inEditPopupsVisible = true;

    },

    // 关闭审核/驳回弹窗

    closeInEdit() {

      this.inEditPopupsVisible = false;

      this.closeEdit();

    },



    queryTableon() {

      this.queryTable(1);

      this.inEditPopupsVisible = false;

    },

    showInput() {

      // debugger

      this.editPopupsVisible = true;

      // this.$nextTick(_ => {

      //   this.$refs.saveTagInput.$refs.input.focus();

      // });

    },

    // 点击选择标签

    handleClose(tag) {

      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);

    },

    handleInputConfirm() {

      let inputValue = this.inputValue;

      if (inputValue) {

        this.dynamicTags.push(inputValue);

      }

      this.inputVisible = false;

      this.inputValue = "";

    }

  },

  //监听标签值

  watch: {

    dynamicTags(value) {

      let val = value.join(",");

      var parent = this.$utils.getHasFormFieldParentComponent(this);

      parent.formField[this.codeField] = val;

      this.$emit("changeCode", value);

    },

    getVal(xzz) {

      let val = [];

      this.dynamicTags = xzz.split(",");

    }

  }

};

</script>



<style lang="scss" scoped>

>>> div.fixHeight {

  max-height: 500px;

  overflow-y: auto;

  overflow-x: hidden;

}

h3 {

  padding-left: 1%;

  text-align: left;

  font-weight: 600;

  transition: 1s;

  transition-timing-function: cubic-bezier(0.66, 0.3, 0.08, 1.41);

  opacity: 1;

  text-shadow: #c0c4cc 3px 3px 2px;

  /*transform-style: preserve-3d;*/

  /*transform: perspective(900px) translateZ(0) translateX(0);*/

}

/*h3.showit {*/

/*  padding-left: 30%;*/

/*  text-align: left;*/

/*  font-weight: 600;*/

/*  opacity: .3;*/

/*}*/

h3 button.el-button {

  float: right;

  margin-right: 10px;

}



div.filter-container {

  // margin-bottom: 35px;

}

>>> .el-table .warm-row {

  background: #eedbae;

}

.filter-container.filter-title::before {

  border-left: 4px solid #0075ff;

  padding-right: 10px;

  height: 20px;

  left: 0px;

  top: 4px;

}

</style>

